<template>
	<view class="content">
		<!-- <image class="logo" src="@/static/logo.png"></image> -->
		<view class="text-area">
			<!-- 轮播图 -->
			<uni-swiper-dot class="uni-swiper-dot-box" :info="adList" :current="current" field="content">
				<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
					<swiper-item v-for="(item, index) in adList" :key="index">
						<view class="swiper-item" @click="clickBannerItem(item)">
							<image :src="url + item.imageUrl" mode="aspectFill"
								:draggable="false" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 菜单 -->
		<view class="grid-body" style="margin-bottom: 10rpx;border-bottom: 6rpx solid #f1f1f1;">
			<uni-grid :column="4" :showBorder="false"> 
				<uni-grid-item  >
					<view class="grid-item-box" @click="notice">
						<uni-icons type="chat-filled" size="30"></uni-icons>
						<text class="text">公告</text>
					</view>
				</uni-grid-item>  
				<uni-grid-item>
					<view class="grid-item-box"  @click="room">
						<uni-icons type="shop-filled" size="30"></uni-icons>
						<text class="text">治疗屋</text>
					</view>
				</uni-grid-item>
				 
				<uni-grid-item>
					<view class="grid-item-box" @click="appointment">
						<uni-icons type="heart-filled" size="30"></uni-icons>
						<text class="text">心理咨询</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="activity"> 
						<uni-icons type="color-filled" size="30"></uni-icons>
						<text class="text">社区活动</text>
					</view>
				</uni-grid-item>
<!-- 				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="calendar-filled" size="30"></uni-icons>
						<text class="text">心理评测</text>
					</view>
				</uni-grid-item> -->

 
				
			</uni-grid>
		</view>
		<!-- 列表 -->
		<uni-section  title="新闻咨询" type="line"></uni-section>
		<view >
			<view style="padding: 30rpx 20px;" v-for="(item, index) in newList" :key="index" @click="article(item)">
				<view style="height: 200px;margin: 10rpx;">
					<image :src="url + item.coverImage" style="width: 100%;height: 100%;border-radius: 6rpx;"></image>
				</view>
				<view class="title1">
					{{item.title}}
				</view> 
			</view>
		</view>
		
	
	</view>



</template>

<script> 
	import { getAdCarousel } from '@/api/maincode/ad' 
	import { getNewsArticlesList } from '@/api/maincode/news'
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				adList: [],
				newList:[],
				noData: false,
				queryParams: {
				    pageNum: 1,
				    pageSize: 10,
				},
				url:this.$fileUrl

			}
		},
		methods: {
			article(item) {  
			  this.$tab.navigateTo(`/pages/common/article/index?articleId=${item.articleId}`)
			},
			appointment(){
				uni.switchTab({ url: './work/index' }); 
			},
			room(){
				uni.navigateTo({ url: './work/room' });
			},
			notice(){  
				uni.navigateTo({ url: './mine/notice/index' });
			},
			userinfo(){
				uni.navigateTo({ url: './mine/info/index' });
			},
			design(){ 
				uni.navigateTo({ url: './mine/setting/index' });
			},
			help(){ 
				uni.navigateTo({ url: './mine/help/index' });
			},
			activity(){
				uni.navigateTo({ url: './mine/activity/index' });
			},
			getAdCarouselList() {
				getAdCarousel().then(res => {
					this.adList = res.data
				});
			},
			getNews() { 
				getNewsArticlesList(this.queryParams).then(res => {
					if(res.rows == null || res.rows.length < this.queryParams.pageSize ){
						this.noData = true;
						if(this.queryParams.pageNum !=1 ){
							uni.showToast({   title: '已加载全部数据', duration: 2000 });
						}
					}
					this.newList.push(...res.rows)
				});
			},

		},
		onReachBottom() {
			if (!this.noData) {
				this.queryParams.pageNum++;
				this.getNews(); // 获取的数据列表
			}
		},
		onLoad: function() {
			this.getAdCarouselList();
			this.getNews();
		}
	}
</script>

<style>
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.row {
		display: flex;
		flex-direction: row;
	}

	.col {
		flex: 1;
		padding: 10px;
		border: 1px solid black;
	}

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1; 
		display: flex; 
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height:500rpx;
	}

	.swiper-box {
		height: 250px;
	}

	.swiper-item { 
		display: flex; 
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height:500rpx;
		line-height:500rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px; 
			margin: 0 auto; 
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.text-area {
		justify-content: center;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}


	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1; 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height:500rpx;
	}

	.swiper-box {
		/* height: 400rpx; */
	}

	.swiper-item { 
		display: flex; 
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height:500rpx;
		line-height:500rpx;
	}
	.title1{
		font-size: 28rpx;
		  margin: 20rpx 10rpx 0 10rpx;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  font-weight: 600;
		  line-height: 1.5em;
	}
</style>